<template>
  <div class="pc-admin-loga-com-content-box">
    <el-form
      size="mini"
      :inline="true"
      ref="form"
      :model="searchForm"
      label-width="80px">
      <el-form-item
        label="查询条件">
        <el-input
          :style="{ width: '400px' }"
          type="text"
          :rows="1"
          v-model="searchForm.conditions">
          <el-select
            class="w-select"
            v-model="searchForm.selKey"
            slot="prepend"
            placeholder="请选择"
            @change="selectChange">
            <el-option
              v-for="(v, k) in options"
              :label="v.title"
              :value="v.key"
              :key="k"/>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="时间范围">
        <el-date-picker
          v-model="searchForm.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          :clearable="false"
          end-placeholder="结束日期"/>
      </el-form-item>
      <el-form-item label="查询顺序">
        <el-switch v-model="searchForm.reverse"/>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="searchBtnClick">查找
        </el-button>
        <el-button
          type="danger"
          @click="removeAllBtnClick">删除所有
        </el-button>
      </el-form-item>
    </el-form>
    <ul class="table-view">
      <li
        class="cell"
        v-for="(v, k) in listLoadModel.dataArr"
        :key="k">
        <div class="attachment-box w-flex-center">
          <el-button
            class="remove-btn"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeBtnClick(v)"
            circle/>
        </div>
        <slot :item="v"/>
      </li>
    </ul>
    <w-load-more
      :load-model="listLoadModel"/>
  </div>
</template>

<script>
  import YBListLoad from '@/models/YBListLoad'
  import WLoadMore from '@/components/global/loadMore'

  export default {
    name: "PCAdminLogaComContentBox",
    components: {
      WLoadMore
    },
    props: {
      classModel: {
        type: Function,
        default() {
          return function () {
          }
        }
      },
      options: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        /**
         * 查找数据的Form
         */
        searchForm: {
          date: [],
          conditions: null,
          reverse: true,
          selKey: ''
        },
        listLoadModel: null,
      }
    },
    created() {
      this.listLoadModel = new YBListLoad(this.classModel)
    },
    methods: {
      /**
       * 设置默认时间
       */
      setDefaultTime() {
        this.searchForm.date = [this.listLoadModel.startTime, this.listLoadModel.endTime]
      },
      /**
       * 查找按钮点击
       */
      searchBtnClick() {
        this.listLoadModel.clearData()
        this.listLoadModel.otherData.sort = this.searchForm.reverse
        const [startTime, endTime] = this.searchForm.date
        if (startTime && endTime) {
          this.listLoadModel.otherData.startTime = startTime.getTime()
          this.listLoadModel.otherData.endTime = endTime.getTime()
        }
        this.listLoadModel.otherData.selKey = this.searchForm.selKey
        this.listLoadModel.otherData.conditions = this.searchForm.conditions
        this.listLoadModel.loadData().w_then()
      },
      /**
       * 删除按钮点击
       */
      removeBtnClick(model) {
        this.$w_remove_pop(() => {
          return model.removeOne()
        }, `${model.dateStr}的日志`).w_then(() => {
          this.searchBtnClick()
        })
      },
      /**
       * 删除所有日志
       */
      removeAllBtnClick() {
        this.$w_remove_pop(() => {
          return this.classModel.removeAll()
        }, `所有的日志`).w_then(() => {
          this.searchBtnClick()
        })
      },
      selectChange() {
        this.searchForm.conditions = ''
      }
    },
    mounted() {
      this.setDefaultTime()
      this.searchForm.selKey = this.options[0].key
    }
  }
</script>

<style lang="scss" scoped>
  .pc-admin-loga-com-content-box {
    .w-select {
      width: 120px;
    }

    .table-view {
      list-style: none;
      margin: 0;
      padding: 0;

      .cell {
        padding: 5px 100px 5px 10px;
        border-radius: 4px;
        background-color: #efefef;
        margin-bottom: 10px;
        position: relative;
        .attachment-box {
          position: absolute;
          width: 100px;
          height: 100%;
          right: 0;
          top: 0;
        }
      }
    }
  }
</style>

<style lang="scss">
  .pc-admin-loga-com-content-box {
    .log-text {
      margin: 0;
      color: #999;
      font-size: 14px;
      line-height: 20px;
    }
  }
</style>
